<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>behavior用户行为监控</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        ul li {
            line-height: 120px;
            background-color: #eeeeee;
            margin-bottom: 10px;
        }
    </style>
    <script type="module">
        import behavior from './index.js'
        behavior()
    </script>
</head>
<body>
<h1>behavior1</h1>
<h2>behavior2</h2>
<h3>behavior3</h3>
<h4>behavior4</h4>
<h5>behavior5</h5>
<button id="history">Add History</button>
<button id="popstate">Trigger Popstate</button>
<div id="logList"></div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
<script>
// 监听 popstate 事件
window.addEventListener('popstate', (event) => {
    const logList = document.getElementById('logList');
    logList.innerHTML += `<p>popstate event triggered with state: ${JSON.stringify(event.state)}</p>`;
});

// 添加历史记录
const historyDom = document.getElementById('history')
historyDom.addEventListener('click', () => {
    const newState = { page: 2, user: 'Alice' };
    history.pushState(newState, 'Page 2', '?page=2');
    const logList = document.getElementById('logList');
    logList.innerHTML += '<p>Added new history state</p>';
});

// 手动触发 popstate 事件
const popstateDom = document.getElementById('popstate')
popstateDom.addEventListener('click', () => {
    history.back(); // 模拟用户点击后退按钮
});
</script>
</body>
</html>
